<!-- src/components/SearchBar.vue -->
<template>
  <div class="search-bar">
    <div class="search-inputs">
      <el-input
          v-model="searchMeterID"
          placeholder="表ID"
          prefix-icon="el-icon-search"
          clearable
      />
      <el-input
          v-model="searchAlias"
          placeholder="别名"
          prefix-icon="el-icon-user"
          clearable
      />
      <el-input
          v-model="searchMeterIDAgain"
          placeholder="监控ID"
          prefix-icon="el-icon-monitor"
          clearable
      />
    </div>
    <el-button 
      type="primary" 
      icon="el-icon-search" 
      @click="onSearch"
      class="search-button"
    >
      搜索
    </el-button>
  </div>
</template>

<script>
import { quaryMeter } from '@/api/meter.js';

export default {
  props: {
    currentType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      searchMeterID: '',
      searchAlias: '',
      searchMeterIDAgain: ''
    };
  },
  methods: {
    async onSearch() {
      try {
        const response = await quaryMeter(this.searchMeterID, this.searchAlias, this.currentType, this.searchMeterIDAgain);
        this.$emit('search-results', response.data);
      } catch (error) {
        this.$message.error('搜索失败');
        console.error(error);
      }
    }
  }
}
</script>

<style scoped>
.search-bar {
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.search-inputs {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-inputs .el-input {
  max-width: 200px;
  height: 36px;
}

.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 36px;
  font-weight: 500;
}

.el-input :deep(.el-input__inner) {
  height: 36px;
  line-height: 36px;
}

@media (max-width: 768px) {
  .search-bar {
    flex-direction: column;
  }
  
  .search-inputs {
    flex-direction: column;
  }
  
  .search-inputs .el-input {
    max-width: 100%;
  }
  
  .search-button {
    width: 100%;
  }
}
</style>
